<template>
  <div>
    <!-- 动画组件  动画组件列表 -->
   <h1>我是产品页</h1>
   <!-- 使用vuex的 state数据在元素中 -->
    <h1>vuex的count:{{$store.state.count}}</h1>
     <h1>vuex的getters：{{$store.getters.countDouble}}</h1>
    <button @click="toCh">用actions 去修改state</button>
   <!-- ---------------------------------------- -->
   <transition name="fade">
      <div id="box" v-if="flag">你好</div>
   </transition>
   <!--  transition结合 animate.css 完成动画-->
    <transition   
      enter-active-class="animate__animated animate__bounceInLeft"
      leave-active-class="animate__animated animate__bounceOutRight">
      <!-- transition不仅提供了name 
       还提供属性 -->
      <div id="box" v-if="flag">你好</div>
   </transition>
<!-- transition-group   放置循环的列表的动画效果 -->
   <transition-group 
     enter-active-class="animate__animated animate__bounceInLeft"
      leave-active-class="animate__animated animate__bounceOutRight" name="list" tag="ul">
      <template v-if="flag">
          <li  v-for="item in mylist" :key="item">{{item}} </li>
      </template>
        
   </transition-group>
     


   <button @click="flag=!flag"> 切换</button>

  </div>
</template>

<script>
// 组件内部的路由钩子函数
export default {
  name: 'Vue2304BProduct',

  data() {
    return {
      flag:true,
      mylist:["河北","湖南","四川","广东"]
    };
  },
  // 组件进入执行 拦截钩子
  beforeRouteEnter (to, from, next) {
     //to 本组件路由信息
      console.log(to,"777777777777777")
      // from 即将离开组件路由信息
      console.log(from,'888888888888888')
      // if(from.name=="Home"){
      //   next("/login")
      // }
      next();
  },
  // 路由信息更新的 执行拦截钩子
  beforeRouteUpdate (to, from)  {
    
  },
  // 离开组件执行 拦截钩子函数
  beforeRouteLeave (to, from, next) {
    // to 即将进入的路由信息
     console.log(to,"66666666666")
      // from 本组件的路由信息
      console.log(from,'333333333')
    next();
  },
  mounted() {
      // 在js使用 vuex的state数据
      console.log("vuex的数据state",this.$store.state.count)
  },

  methods: {
    toCh(){
      // 使用vuex的actions去修改state的数据
      this.$store.dispatch("countAct",10)
    }
  },
};
</script>
<style lang="less" scoped>
  #box{
    width:200px;
    height:200px;
    background:red;
    transition:all 1s;
  }
  // 进入的过程
  .fade-enter-active{
       transition: opacity 0.5s ease;
    }
  
  // 离开过程
  .fade-leave-active{
       opacity: 0;
  }
</style>